<svg xml:space="preserve" viewBox="0 0 500 300" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="svg-switch-container" version="1.1">
  <defs>
     <linearGradient y2="331.0775" x2="360" y1="149.0088" x1="360" gradientUnits="userSpaceOnUse" id="SVGID_1_">
		<stop style="stop-color:#636F7C" offset="0"></stop>
		<stop style="stop-color:#5A6571" offset="1"></stop>
	</linearGradient>
    
    <filter height="160%" width="200%" y="-30%" x="-50%" id="inset-shadow-big-bottom">
        <feOffset dy="2" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="1"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#FFF"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA>
        </feComponentTransfer>
        <feComposite result="final-shadow-1" in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
      
        <feOffset dy="-4" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="2"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="final-shadow-1" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#999"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA> 
        </feComponentTransfer>
        <feComposite result="final-shadow-2" in2="final-shadow-1" in="shadow" operator="over"></feComposite>                    
      
      
      <feGaussianBlur result="blur" stdDeviation="4" in="SourceAlpha"></feGaussianBlur> 
      <feOffset result="offsetblur" dy="3" dx="0"></feOffset>

      <feComponentTransfer in="offsetblur" result="shadow1">
        <feFuncA type="linear"></feFuncA>
      </feComponentTransfer>
      
      <feMerge> 
        <feMergeNode in="shadow1"></feMergeNode>
        <feMergeNode in="final-shadow-2"></feMergeNode> 
      </feMerge>
      
      
    </filter>
    
     <filter id="inset-shadow-container">
        <feOffset dy="2" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="2"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#555"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA>
        </feComponentTransfer>
        <feComposite in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
    </filter>
    
    <filter id="inset-shadow-container-big">
        <feOffset dy="0" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="5"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#555"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA>
        </feComponentTransfer>
        <feComposite in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
    </filter>
    
    <filter height="150%" width="150%" y="-20%" x="-50%" id="big-gaussian-blur">
      <feGaussianBlur result="base-blur" stdDeviation="25"></feGaussianBlur>
    </filter>
    

    
    <filter height="120%" width="150%" y="0" x="-10%" id="drop-shadow">
      <feOffset dy="14" dx="0" in="SourceGraphic" result="offOut"></feOffset>
      <feColorMatrix values="0.2 0 0 
              0 0 0 0.2 
              0 0 0 0 0 
              0.2 0 0 0 
              0 0 0.5 0" type="matrix" in="offOut" result="matrixOut"></feColorMatrix>
      <feGaussianBlur stdDeviation="6" in="matrixOut" result="blurOut"></feGaussianBlur>
      <feBlend mode="normal" in2="blurOut" in="SourceGraphic"></feBlend>
    </filter>
    
        
    <filter height="120%" width="120%" y="0" x="-10%" id="drop-shadow-checkbox">
      <feOffset dy="10" dx="0" in="SourceGraphic" result="offOut"></feOffset>
      <feColorMatrix values="0.0 0 0 
              0 0 0 0.0 
              0 0 0 0 0 
              0.0 0 0 0 
              0 0 0.35 0" type="matrix" in="offOut" result="matrixOut"></feColorMatrix>
      <feGaussianBlur stdDeviation="10" in="matrixOut" result="blurOut"></feGaussianBlur>
      <feBlend mode="normal" in2="blurOut" in="SourceGraphic"></feBlend>
    </filter>

    
  </defs>
<g transform="translate(-130 -110)" class="svg-switch">
	<g filter="url(#big-gaussian-blur)" opacity="1" style="fill:#F4847D;" id="mild-glow">
			<path d="M254.949,330.381l-79.336-79.336c-6.1-6.1-6.1-15.991,0-22.091l79.336-79.336c6.1-6.1,15.991-6.1,22.091,0l79.336,79.336
				c6.1,6.1,6.1,15.991,0,22.091l-79.336,79.336C270.939,336.481,261.049,336.481,254.949,330.381z"></path>
	</g>
	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:#F3F3F0;" filter="url(#drop-shadow)" id="base-outline"></path>

	<path d="M538.979,229.371l-76.344-76.344c-2.935-2.935-6.782-4.403-10.629-4.403H266.328v0.101
		c-3.274,0.363-6.452,1.791-8.962,4.301l-76.344,76.344c-5.87,5.87-5.87,15.388,0,21.258l76.344,76.344
		c2.51,2.51,5.689,3.938,8.962,4.301v0.101h185.678c3.847,0,7.694-1.468,10.629-4.403l76.344-76.344
		C544.849,244.759,544.849,235.241,538.979,229.371z" filter="url(#inset-shadow-container-big)" style="fill:url(#SVGID_1_);" id="base-container"></path>
	

   <path d="M257.071,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846
		l64.09-64.09c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
		C269.989,317.94,261.999,317.94,257.071,313.013z" filter="url(#inset-shadow-container)" class="position-container" style="fill:#525C6B;" id="start_container"></path> 
  
    <path d="M445.083,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846
		l64.09-64.09c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
		C458.001,317.94,450.011,317.94,445.083,313.013z" filter="url(#inset-shadow-container)" style="fill:#525C6B;" class="position-container" id="end_container"></path>
	
  
   <text y="255" x="225" class="text-label noselect">OFF</text>
   <text y="255" x="430" class="text-label noselect">ON</text>  
  
  <g transform="translate(0)" id="checkbox-off"> 
		<path d="M257.071,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846l64.09-64.09
			c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
			C269.989,317.94,261.999,317.94,257.071,313.013z" filter="url(#drop-shadow-checkbox)" style="fill:#F5F3EE;" id="off-bot-cap"></path>
		<path d="M257.942,305.884l-57.832-57.832c-4.447-4.447-4.447-11.656,0-16.103l57.832-57.832
			c4.447-4.447,11.656-4.447,16.103,0l57.832,57.832c4.447,4.447,4.447,11.656,0,16.103l-57.832,57.832
			C269.599,310.331,262.389,310.331,257.942,305.884z" style="fill:#F4847D;" id="off-color"></path>
		<path d="M259.757,291.032l-44.795-44.795c-3.444-3.444-3.444-9.029,0-12.473
			l44.795-44.795c3.444-3.444,9.029-3.444,12.473,0l44.795,44.795c3.444,3.444,3.444,9.029,0,12.473l-44.795,44.795
			C268.786,294.477,263.202,294.477,259.757,291.032z" filter="url(#inset-shadow-big-bottom)" style="fill:#FFFFFF;" id="off-top-cap"></path>
	</g>
  
  <g id="control-group">
    	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37 
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:transparent" id="controlon" class="control-element"></path>
    
        	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37 
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:transparent" transform="translate(0 300)" class="control-element" id="controloff"></path>
  </g>
  
   <animateTransform values="0 0 ; 0 300" fill="freeze" dur="0.01s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controlon"></animateTransform>
  
    <animateTransform values="0 300 ; 0 0" fill="freeze" dur="0.01s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controloff"></animateTransform>
  
  <animateTransform values="0 300 ; 0 0" fill="freeze" dur="0.01s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controlon"></animateTransform>
  
    <animateTransform values="0 0 ; 0 300" fill="freeze" dur="0.01s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controloff"></animateTransform>  
  
  
  
    <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="0;-5;200;180;188;" fill="freeze" dur="0.3s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#checkbox-off"></animateTransform>
  
   <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="188;193;-12; 8; 0" fill="freeze" dur="0.3s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#checkbox-off"></animateTransform>
  
    <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="188;193;-12; 8; 0" fill="freeze" dur="0.3s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#mild-glow"></animateTransform>
  
      <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="0;-5;200;180;188;" fill="freeze" dur="0.3s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#mild-glow"></animateTransform>
  
  
  ?&gt;
  
  
  
    
  
   
  
     
  
   
  
  


</g>
</svg>
<style>
/* From Uiverse.io by Nawsome - Tags: skeuomorphism, switch, on, off */
body {
  font-size: 20px;
  background-color: #d5d9e0;
  padding: 40px;
}

#checkbox-on {
  display: none;
}

.control-element {
  cursor: pointer;
}

.text-label {
  font-size: 1.8em;
  font-family: sans-serif;
  fill: #6D7788;
  text-shadow: 0 0.02em 0.1em rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.position-container {
  cursor: pointer;
}

.svg-switch-container {
  width: 10em;
}

</style>
